{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block head %}
    <title>Add an Interview</title>
{% endblock %}

{% block content %}

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>


    {% if form.instance.id %}
        <h1>Edit Interview</h1>
    {% else %}
        <h1>Create Interview</h1>
    {% endif %}
    <hr>


        <form method="post" style="margin-bottom: 20px;">
            <div class="form-group">
                {% csrf_token %}
                {{ form.media }}
                {{ form.as_p }}
                {{ form.errors }}
                <p>Note: Date format is yyyy-mm-dd</p>

            </div>
            {{formset.management_form}}
            <hr>

            {% if form.instance.id %}
                <h1>Edit Round</h1>
            {% else %}
                <h1>Add Round</h1>
            {% endif %}

            <hr>

            <div id="form_set">

            {% for form in formset %}
                {{ form.id }} <!--This is just for handling an error during save after editing -->
                {{ form.media }}
                <table class="table">
                    {{ form.as_table }}
                </table>
            {% endfor %}
            </div>

            <input type="button" value="+ Round" id="add_more" class="btn btn-info btn-lg"></input>

            <div id="empty_form" style="display:none">
                <table class='table'>
                    <h1> New Round:</h1>
                    {{ formset.empty_form.as_table }}
                </table>
            </div>

            <input class="btn btn-success btn-lg" type="submit" name="Save" value="Save Interview">
            {% if form.instance.id %}
                <a class="btn btn-lg btn-danger" href="{% url 'Evaluator:interview_details' form.instance.pk %}">Cancel</a>
            {% else %}
                <a class="btn btn-lg btn-danger" href="{% url 'Evaluator:profile' %}">Cancel</a>
            {% endif %}
            </div>
        </form>


<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/actions.min.js' %}"></script>

{# The below script is to create multi copies of Round form using + button #}
<script type="text/javascript">
    $('#add_more').click(function()
    {
     var form_idx = $('#id_form-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });

</script>
{% endblock %}
